<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            *{
                  margin: 0;
                  padding: 0;
            }
            .box{
                  width: 100px;
                  height: 100px;
                  position: absolute;
                  left: 200px;
                  top: 100px;
                  background-color: tomato;
                  border: 5px solid #ddd;
                  padding: 20px;
            }
            .container{
                  margin-left: 100px;
                  position: relative;
            }
            .pox{
                  width: 200px;
                  height: 10px;
                  background-color: #000;
            }
      </style>
</head>
<body>
      <div class="pox"></div>
      <div class="container">
            <div class="box"></div>
      </div>
      <script src="./jquery.js"></script>
      <script>
            // css
            // 宽高位置;
            // 不传参数就是取值, 传参数就是赋值
            // console.log($(".box").width());
            // console.log($(".box").width(200));

            // console.log($(".box").width()); // content
            // console.log($(".box").innerWidth()); // content + padding
            // console.log($(".box").outerWidth()); // content + padding + border

            // height 略;

            // offset 
            // position(); 参照物 : 父级的定位元素;
            // offset();   参照物 : 页面的可视区边缘;


            // console.log($(".box").position());
            // console.log($(".box").offset());

            // 只有offset可以设置参数;
            // position不可以设置;

            $(".box").offset({
                  left : 200
            })


      </script>
</body>
</html>